<template>
	<view class="headerBg">
		<uv-navbar title="商圈商铺" :placeholder="true" :leftIcon="leftIcon" bgColor="rgba(0,0,0,0)"></uv-navbar>
		<!-- 搜索框 -->
		<view class="p-l-30 p-r-30 flex">
			<view class="" style="width: 100%;" @click="$util.redirectTo('/otherpages/search/search')">
				<uv-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" bgColor="#fff"></uv-search>
			</view>
			<view class="" style="position: relative;" @click="$util.redirectTo('/otherpages/notice/notice')">
				<view class="iconfont icon-tongzhi m-l-20" style="font-size: 50rpx;"></view>
				<view class="" style="position: absolute;top: 2rpx;right: -10rpx;">
					<uv-badge type="error" max="99" :value="notNum||0"></uv-badge>
				</view>
			</view>
		</view>
		<!-- 轮播 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in banner" :key="i">
				<image :src="$util.img(item.image)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 商圈精选 -->
		<view class="shopInfoA">
			<view class="flex m-b-10">
				<view class="iconfont icon-chengshi f-t" style="font-size: 36rpx;"></view>
				<view class="font-32 font-weight m-l-10">商圈精选</view>
			</view>
			<scroll-view scroll-x="true" class="scrollBox">
				<view v-for="(item,index) in businessarea" :key="index" class="scrItem"
					@click="$util.redirectTo('/otherpages/shopHire/shopHire',{id:id})">
					<view class="flex">
						<image :src="$util.img(item.image)" mode=""></image>
						<view class="scrItemTxt m-l-10">
							<view class="font-28">{{item.name}}</view>
							<view class="font-24 grey">{{item.introduce}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 商圈商铺 -->
		<view class="font-32 font-weight m-l-30">商圈商铺</view>
		<view class="">
			<HMFilterDropdown @newArea="newArea" :newAreaShow="true"  @searchFatFn="searchFatFn" :filterData="filterData" :defaultSelected="defaultSelected"
				@confirm="confirm">
			</HMFilterDropdown>
		</view>
		<view class="p-30" v-if="lists.length">
			<block v-for="(item,i) in lists" :key="i">
				<shopItem type="shangQuan" :item="item"></shopItem>
			</block>
		</view>

		<block v-else>
			<noneList></noneList>
		</block>

	</view>
</template>

<script>
	import HMFilterDropdown from "@/uni_modules/HM-filterDropdown/components/HM-filterDropdown/HM-filterDropdown"
	export default {
		data() {
			return {
				businessarea_id: '',
				industry_id: 'all',
				search: '',
				lists: [],
				district: '',
				city: '',
				area: 'all',
				type: 'all',
				status: 'all',
				monthrent: 'all',
				keyword: '',
				transfer_fee: 'all',
				businessarea: [],
				banner: [],
				leftIcon: '',
				filterData: [{
						"name": '区域',
						"type": 'hierarchy-column',
						"submenu": [{
							"name": "不限",
							"value": "all"
						}, ]
					},

					{
						"name": '月租',
						"type": 'filter',
						"submenu": [{
							"name": '月租',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "2千以内",
									"value": "1"
								},
								{
									"name": "2千-5千",
									"value": "2"
								},
								{
									"name": "5千-1万",
									"value": "3"
								},
								{
									"name": "1万-1.5万",
									"value": "4"
								},
								{
									"name": "1.5万-2万",
									"value": "5"
								},
								{
									"name": "2万以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '转让费',
						"type": 'filter',
						"submenu": [{
							"name": '转让费',
							"submenu": [{
									"name": '不限',
									"value": "all",
								},
								{
									"name": '5万以下',
									"value": "1",
								},
								{
									"name": '5-10万',
									"value": "2",
								},
								{
									"name": '10-20万',
									"value": "3",
								},
								{
									"name": '20-50万',
									"value": "4",
								},
								{
									"name": '50万以上',
									"value": "5",
								}
							]
						}, ]
					},
					{
						"name": '面积',
						"type": 'filter',
						"submenu": [{
							"name": '面积',
							"submenu": [{
									"name": "不限",
									"value": "all"
								},
								{
									"name": "20以内",
									"value": "1"
								},
								{
									"name": "20-50",
									"value": "2"
								},
								{
									"name": "50-100",
									"value": "3"
								},
								{
									"name": "100-150",
									"value": "4"
								},
								{
									"name": "200-500",
									"value": "5"
								},
								{
									"name": "500以上",
									"value": "6"
								}
							]
						}, ]
					},
					{
						"name": '行业',
						"type": 'filter',
						"submenu": [{
							"submenu": []
						}, ]
					},
				],
				defaultSelected: [
					[3, 0, 1], //第0个菜单选中 一级菜单的第6项，二级菜单的第0项，三级菜单的第1项
					[2, 0, 1], //第1个菜单选中 一级菜单的第2项，二级菜单的第0项，三级菜单的第1项
					[1], //第2个菜单选中 一级菜单的第1项 一级菜单的第1项
					[
						[0],
						[1, 2, 7],
						[1, 0]
					], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
					[
						[0],
						[1],
						[1]
					] //单选菜
				],
				cityId: '',
				noticeList: [],
				notNum: 0,
				min_area: '',
				max_area: '',
				min_month_rent: '',
				max_month_rent: '',
				min_transfer_fee: '',
				max_transfer_fee: '',
			};
		},
		onLoad() {
			this.getHomeDetali()
			this.getHomeDetaliA()
		},
		onShow() {
			this.noticecount()
			this.notice()
			uni.getStorage({
				key: 'city',
				success: res => {
					this.filterData[0].name = res.data
					this.city = res.data
				},
				fail: err => {}
			})
			uni.getStorage({
				key: 'cityId',
				success: res => {
					this.cityId = res.data
					this.businessareaList(res.data)
				},
				fail: err => {
					this.cityId = ''
				}
			})

		},
		components: {
			HMFilterDropdown
		},

		methods: {
			// 未点击的数量
			noticecount() {
				this.$api.sendRequest({
					url: '/api/index/noticecount',
					data: {},
					success: res => {
						this.notNum = res.data
					}
				})
			},
			notice() {
				this.$api.sendRequest({
					url: '/api/index/notice',
					success: res => {
						this.noticeList = res.data
					}
				})
			},
			// 筛选确定
			confirm(e) {
				// 转让费
				if (e.min_transfer_fee && e.min_transfer_fee) {
					this.min_transfer_fee = e.min_transfer_fee
					this.max_transfer_fee = e.max_transfer_fee
					this.filterData[2].name = this.min_transfer_fee + '-' + this.max_transfer_fee
				} else {
					this.min_transfer_fee = ''
					this.max_transfer_fee = ''
				}


				if (e.min_month_rent && e.max_month_rent) {
					this.min_month_rent = e.min_month_rent
					this.max_month_rent = e.max_month_rent
					this.filterData[1].name = this.min_month_rent + '-' + this.max_month_rent
				} else {
					this.min_month_rent = ''
					this.max_month_rent = ''
				}

				if (e.min_area && e.max_area) {
					this.min_area = e.min_area
					this.max_area = e.max_area
					this.filterData[3].name = this.min_area + '-' + this.max_area
				} else {
					this.min_area = ''
					this.max_area = ''
				}



				this.lists = []
				this.loadShow = true,
					this.loadStatus = 'loadmore',
					this.pageNum = 1
				if (e.value[0].length && e.index[0][0] != null) {
					// 地区
					this.city = e.value[0][0]
					this.district = e.value[0][1]
				}

				if (e.value[1].length && e.index[1][0].length) {
					// 月租
					if (!this.min_month_rent) {
						this.filterData[1].name = this.filterData[1].submenu[0].submenu[e.index[1][0]].name
					}
					this.monthrent = e.value[1][0][0]
				}
				if (e.value[2].length && e.index[2][0] != null && e.index[2][0].length) {
					// 转让费
					if (!this.min_transfer_fee) {
						this.filterData[2].name = this.filterData[2].submenu[0].submenu[e.index[2][0]].name
					}

					this.transfer_fee = e.value[2][0][0]
				}
				if (e.value[3].length && e.index[3][0].length) {
					// 面积
					if (!this.min_area) {
						this.filterData[3].name = this.filterData[3].submenu[0].submenu[e.index[3][0]].name
					}
					this.area = e.value[3][0][0]
				}
				if (e.value[4].length && e.index[4][0].length) {
					// 行业
					this.filterData[4].name = this.filterData[4].submenu[0].submenu[e.index[4][0]].name
					this.industry_id = e.value[4][0][0]
				} else {
					this.filterData[4].name = '行业'
					this.industry_id = 'all'
				}

				this.getLists()
			},
			// 搜索
			searchFatFn(e) {
				this.search = e
				this.getLists()
			},
			// 商圈 
			businessareaList(id) {
				this.$api.sendRequest({
					url: '/api/shop/businessarea',
					data: {
						operate_area_id: id
					},
					success: res => {
						this.businessarea = res.data
						if (res.data.length) {
							this.businessarea_id = res.data[0].id
							uni.getStorage({
								key: 'city',
								success: res => {
									console.log(res);
									this.city = res.data
									this.getLists()
								},
								fail: err => {
									console.log(err);
									this.city = ''
									this.getLists()
								}
							})
						}
					}
				})
			},

			getHomeDetali() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						this.banner = res.data.banner
						this.$forceUpdate()
					}
				})
			},

			// 列表
			getLists() {
				this.$api.sendRequest({
					url: '/api/shop/lists',
					data: {
						page: 1,
						num: 100,
						search: this.search,
						district: this.district || 'all',
						city: this.city || 'all',
						businessarea_id: this.businessarea_id,
						status: this.status,
						monthrent: this.monthrent,
						area: this.area,
						type: this.type,
						transfer_fee: this.transfer_fee,
						is_recommend: 0,
						is_deal: 0,
						industry_id: this.industry_id,
						shop_type: 1,
						min_area: this.min_area,
						max_area: this.max_area,
						min_month_rent: this.min_month_rent,
						max_month_rent: this.max_month_rent,
						min_transfer_fee: this.min_transfer_fee,
						max_transfer_fee: this.max_transfer_fee,
					},
					success: res => {
						this.lists = res.data.data
					}
				})
			},

			getArea(id, i) {
				this.$api.sendRequest({
					url: '/api/index/area',
					data: {
						area_id: id
					},
					success: res => {
						let arrs = this.filterData[0].submenu[i].submenu
						arrs.push({
							name: '不限',
							value: 'all',
						})
						res.data.forEach((item, i) => {
							arrs.push({
								name: item.name,
								value: item.name,
							})
						})
						this.filterData[0].submenu[i].submenu = arrs
					}
				})

			},
			// 配置信息
			getHomeDetaliA() {
				this.$api.sendRequest({
					url: '/api/index/index',
					success: res => {
						// 获取市+区
						res.data.operatearea.forEach((item, i) => {
							this.filterData[0].submenu.push({
								name: item.city,
								value: item.city,
								submenu: [],
								id:item.id
							})
							// this.getArea(item.id, i + 1)
						})
						this.getArea(res.data.operatearea[0].id, 1)
						// 获取行业 industry
						res.data.industry.forEach((item, i) => {
							this.filterData[4].submenu[0].submenu.push({
								name: item.name,
								value: item.id,
							})
						})
						this.$forceUpdate()
					}
				})
			},
			newArea(id, i) {
				this.getArea(id, i)
			},
		}
	}
</script>

<style lang="scss">
	.scrollBox {
		width: 640rpx;
		white-space: nowrap;
	}

	.scrItem {
		padding: 10rpx;
		display: inline-block;
		width: 360rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: rgba(245, 246, 247, 1);
		margin-right: 24rpx;

		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: 8rpx;
		}

		.scrItemTxt {
			width: 236rpx;
			height: 96rpx;
			/* 第一步：让文字强制一行显示 */
			white-space: nowrap;
			/* 第二步：溢出隐藏 */
			overflow: hidden;
			/* 第三步：溢出的内容省略号显示 */
			text-overflow: ellipsis;

			view {
				white-space: nowrap;
				/* 第二步：溢出隐藏 */
				overflow: hidden;
				/* 第三步：溢出的内容省略号显示 */
				text-overflow: ellipsis;
			}
		}
	}

	.shopInfoA {
		width: 650rpx;
		height: 172rpx;
		opacity: 1;
		border-radius: 16rpx;
		background: linear-gradient(177.69deg, rgba(255, 224, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
		box-shadow: 0rpx 4rpx 8rpx rgba(26, 34, 53, 0.08);
		margin: 25rpx auto;
		padding: 20rpx;
	}


	swiper {
		width: 696rpx;
		height: 270rpx;
		margin: 25rpx auto;
		border-radius: 20rpx;

		swiper-item {
			width: 696rpx;
			height: 270rpx;
			border-radius: 20rpx;

			image {
				border-radius: 20rpx;
				width: 696rpx;
				height: 270rpx;
			}
		}
	}

	.headerBg {
		width: 750rpx;
		height: 536rpx;
		opacity: 1;
		background: linear-gradient(180deg, rgba(255, 234, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	}
</style>
